<template>
  <div id="app">
    <div class="container">
      <!-- 第一行：玩家区 -->
      <div class="player-block">
        <div v-for="(player, index) in players" :key="index" :class="['player-item', player.canuseCls(), player.selectedCls() ]" @click="clickPlayer(player)">
          <div class="playername">
            {{ player.name }}
          </div>
          <div class="playerhp">
            HP: {{ player.hpInfo() }}
          </div>
          <div class="cardcount">
            手牌数: {{ player.handCardCount() }}
          </div>
          <div class="equipment-area">
            <div v-for="(equip, index) in player.equipmentAreas" :key="index"  :class="['equipment-item', equip && equip.textColor, equip && equip.canuseCls(), equip && equip.selectedCls()]" @click="clickEquip(equip)">{{ equip ? equip.numberInfo + "  " + equip.cardInfo : "空" }}</div>
          </div>
          
        </div>
      </div>

      <!-- 第二行：日志区 -->
      <div class="logging-block">
        <div v-for="(log, index) in displayLogs" :key="index">{{ log }}</div>
      </div>

      <!-- 第三行：按钮区 -->
      <div class="btn-block">
        <button class="action-btn" @click="pushCard">确认/出牌 ({{ selectedCardNum }})</button>
        <button class="action-btn" @click="popCard">取消/弃牌/随机</button>
      </div>

      <!-- 第四行：卡牌区 -->
      <div class="card-block">
        <div :class="['card-left', currentPlayer.canuseCls(), currentPlayer.selectedCls()]" @click="clickPlayer(currentPlayer)">{{ currentPlayer.name }} HP: {{ currentHP }}</div>
        <div class="card-center">
          <div v-for="(card, index) in currentHandCards" :key="index" :class="['card-item', card.textColor, card.canuseCls(), card.selectedCls() ]" @click="clickCard(card)">
            <div>
              {{ card.numberInfo }}
            </div>
            <div>
              {{ card.cardInfo }}
            </div>
          </div>
        </div>
        <div class="equipment-area card-right">
          <div v-for="(equip, index) in currentPlayer.equipmentAreas" :key="index"  :class="['equipment-item', equip && equip.textColor, equip && equip.canuseCls(), equip && equip.selectedCls()]" @click="clickEquip(equip)">{{ equip ? equip.numberInfo + "  " + equip.cardInfo : "空" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex'
import { PlayerView, CardView, ViewStoreDispather, EquipView } from './store/viewStore';
import { GameManager } from './core/gamesystem/gameManager';
import { WaitForPushCardEvent, createDefaultEvent } from './store/reactiveStore';

export default defineComponent({
  setup() {
    const store = useStore();

    // 点击玩家事件
    const clickPlayer = (pv: PlayerView) => {
      // 不可选
      if (!pv.canPick) {
        return
      }
      const equipmentAreas = pv.equipmentAreas
      if (equipmentAreas.some(t => t && t.canPick)) {
        pv.selected = true
        return
      }

      // 取消选择
      if (pv.selected) {
        pv.pick()
        return
      }
      const selectedPlayerNum = ViewStoreDispather.selectedPlayerNum(store)
      const canPickMax = ViewStoreDispather.canPickMax(store)
      // 选中
      if (selectedPlayerNum < canPickMax) {
        pv.pick()
      }
    }

    // 选择卡牌事件
    const clickCard = (cv: CardView) => {
      
      if(!cv) {
        return
      }
      // 不可选
      if (!cv.canPick) {
        return
      }
      // 取消选择
      if (cv.selected) {
        cv.selectCard()
        return
      }
      
      const selectedCardNum = ViewStoreDispather.selectedCardNum(store)
      
      const canPickMax = ViewStoreDispather.canPickMax(store)
      // 选中
      if (selectedCardNum < canPickMax) {
        cv.selectCard()
      }
    }

    // 选择装备
    const clickEquip = (cv: EquipView) => {
      if(!cv) {
        return
      }
      // 不可选
      if (!cv.canPick) {
        return
      }
      // 取消选择
      if (cv.selected) {
        cv.selectCard()
        return
      }

      const canPickMax = ViewStoreDispather.canPickMax(store)
      let count = 0
      for(const equip of cv.owner.equipmentAreas) {
        if (equip && equip.selected) {
          count++
        }
      }
      if (count < canPickMax) {
        cv.selectCard()
      }

    }

    // 确定按钮
    const pushCard = () => {
      const canPickMax = ViewStoreDispather.canPickMax(store)
      const canPickMin = ViewStoreDispather.canPickMin(store)
      let selectedCards = ViewStoreDispather.selectedCards(store)
      const selectedPlayers = ViewStoreDispather.selectedPlayers(store)
      const selectedEquipments = ViewStoreDispather.selectedEquipments(store)
      if (selectedPlayers.length > 0 && selectedEquipments.length > 0) {
        selectedCards = selectedCards.concat(selectedEquipments)
      }
      const enoughCard = selectedCards.length >= canPickMin && selectedCards.length <= canPickMax
      const enoughPlayer = selectedPlayers.length >= canPickMin && selectedPlayers.length <= canPickMax
      if (enoughCard || enoughPlayer) {
        const waitForButtonResolve = store.state.reactiveStore.waitForButton
        const event: WaitForPushCardEvent = createDefaultEvent({ selectedCards: selectedCards, selectedPlayers: selectedPlayers })
        waitForButtonResolve(event)
      } else {
        ViewStoreDispather.appendLog(store, '请选择满足数量的卡牌/玩家')
      }

    }

    // 取消按钮
    const popCard = () => {
      const waitForButtonResolve = store.state.reactiveStore.waitForButton
      const event: WaitForPushCardEvent = createDefaultEvent({ cancel: true })
      waitForButtonResolve(event)
    }

    // gm.run()
    let viewStore = store.state.viewStore
    let players = computed( () => viewStore.players)
    let currentPlayer = computed( () => viewStore.currentPlayer)
    let currentHandCards = computed( () => viewStore.currentHandCards)
    let displayLogs = computed(() => store.getters['viewStore/displayLogs'])
    let selectedCardNum = ViewStoreDispather.selectedCardNumComputed(store)
    let currentHP = computed(() => store.getters['viewStore/currentHP'])
    
    const gm = GameManager.create()
    onMounted(() => {
      gm.run()
    })



    return {
      players,
      currentPlayer,
      currentHP,
      currentHandCards,
      displayLogs,
      selectedCardNum,
      clickPlayer,
      clickCard,
      clickEquip,
      pushCard,
      popCard
    };
  },
})

</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}

/* 第一行样式 */
.player-block {
  display: flex;
}

.player-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  line-height: 3vw;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #000000;
}

.player-item:last-child {
  border-right: none;
}

.equipment-area {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.equipment-item {
  line-height: 3vw;
  align-items: center;
  border: 1px solid #000;
}

/* 第二行样式 */
.logging-block {
  font-size: 12px;
  border: 1px solid #ccc;
}

/* 第三行样式 */
.btn-block {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

.action-btn {
  padding: 8px 16px;
  cursor: pointer;
}

/* 第四行样式 */
.card-block {
  font-size: 12px;
  display: flex;
  border: 1px solid #ccc;
}

.card-left {
  width: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ccc;
}

.card-center {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-right: 1px solid #ccc;
}

.card-item {
  padding: 1vw 0;
  border: 1px solid #ccc;
  line-height: 4vw;
}

.card-right {
  width: 180px;
}

.redtxt {
  color: rgb(211, 22, 59);
}

.balcktxt {
  color: #000;
}

.disable {
  background-color: #ccc;
}

.viewable {
  background-color: #fff;
}

.selected {
  background-color: rgb(164, 241, 215);
}

.equipselected {
  background-color: rgb(239, 179, 154);
}

</style>
